/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div>
    <el-form :model="Form" ref="addForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="设置相位" prop="oldPass">
        <div class="devs-table">
          <el-table
            ref="multipleTable"
            :data="list"
            size="mini"
            :max-height="tableHeight"
            style="width: 100%"
            @cell-click="onCellClick"
            id="footerBtn">
            <el-table-column
              type="index"
              label="#"
              align="center"
              width="40">
            </el-table-column>
            <el-table-column
              prop="agentid"
              :label="$t('openatc.devicemanager.crossid')"
              align="center"
              width="100">
            </el-table-column>
            <el-table-column
              prop="phaseDesc"
              label="上行"
              align="center">
              <template  slot-scope="scope">
                <div style="display:flex;justify-content:center;">
                  <!-- <div style="">
                    <xdrdirselector Width="40px" Height="40px" :showlist="getShowList(scope.row, bizTypeUp)"></xdrdirselector>
                  </div> -->
                  <SelectCrossPhase :agentid="scope.row.agentid"
                                    :bizType="bizTypeUp"
                                    style="width:100%;"
                                    :placeholder="getShowPlaceHolder(scope.row, 'up')"
                                    @onChange="onSelectCrossPhaseChange"
                                    @click.native="onColumClick"></SelectCrossPhase>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="下行"
              align="center">
              <template  slot-scope="scope">
                <div>
                  <SelectCrossPhase :agentid="scope.row.agentid"
                                    :bizType="bizTypeDown"
                                    :placeholder="getShowPlaceHolder(scope.row, 'down')"
                                    @onChange="onSelectCrossPhaseChange"
                                    @click.native="onColumClick"></SelectCrossPhase>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="display:flex;justify-content:end;">
      <el-button type="primary" @click="onPreviousClick()">上一步</el-button>
      <el-button type="primary" @click="onNextClick()">下一步</el-button>
    </div>
  </div>
</template>

<script>
import SelectCrossPhase from '../../../components/SelectCrossPhase'
import xdrdirselector from '../../../components/XRDDirSelector'
import { getTheme } from '../../../utils/auth'
export default {
  name: 'editRoutePhase',
  components: { SelectCrossPhase, xdrdirselector },
  props: {
    route: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      bizTypeUp: 'up',
      bizTypeDown: 'up',
      agentid: '12001-503',
      isedit: true,
      step: 2,
      tableHeight: 450,
      list: [],
      addDialogVisible: false,
      Form: {
        name: ''
      }
    }
  },
  mounted () {
    console.log(this.route)
    if (this.route.devs) {
      this.list = this.route.devs
    }
  },
  methods: {
    getShowList (row, bizType) {
      let res = ''
      let desc = row.forwardphasedirection
      if (!desc) {
        return res
      }
      if (bizType === 'up') {
        desc = row.forwardphasedirection
      } else {
        desc = row.backphasedirection
      }
      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
      let dirArr = []
      for (let rec of desc) {
        let recd = {
          id: rec,
          color: color
        }
        dirArr.push(recd)
      }
      res = dirArr
      return res
    },
    getShowPlaceHolder (row, bizType) {
      let res = ''
      let desc = row.forwardphaseDesc
      if (!desc) {
        return res
      }
      if (bizType === 'up') {
        desc = row.forwardphaseDesc
      } else {
        desc = row.backphaseDesc
      }
      // res = this.$t('openatc.greenwaveoptimize.phase') + phase + ' ' + desc
      res = desc
      return res
    },
    onColumClick () {
      console.log('SelectCrossPhase click')
    },
    onCellClick (row, column, cell, event) {
      console.log(row)
      console.log(column)
      console.log('onCellClick click')
    },
    onSelectCrossPhaseChange (value, option, agentid, bizType) {
      let row = this.list.filter(dev => dev.agentid === agentid)[0]
      let phasedirection = option.item.map(op => op.id)
      let label = option.label
      if (bizType === 'up') {
        row.forwardphasedirection = phasedirection
        row.forwardphaseid = value
        row.forwardphaseDesc = label
      } else {
        row.backphasedirection = phasedirection
        row.backphaseid = value
        row.backphaseidDesc = label
      }
    },
    show (param) {
      if (param) {
        this.isedit = true
        this.Form.name = param.name
        this.list = param.list
      }
      this.addDialogVisible = true
    },
    close () {
      this.resetForm()
      this.addDialogVisible = false
    },
    onAddClick () {
      let choseIntersection = this.$refs.choseIntersection
      choseIntersection.show()
    },
    onSureClick (devices) {
      let diffList = []
      for (let dev of devices) {
        let matchList = this.list.filter(item => item.agentid === dev.agentid)
        if (matchList.length === 0) {
          diffList.push(dev)
        }
      }
      this.list = this.list.concat(diffList)
    },
    handleDelete (index) {
      this.list.splice(index, 1)
    },
    onPreviousClick () {
      let res = {
        list: this.list
      }
      this.$emit('onPreviousClick', res, this.step)
    },
    onNextClick () {
      let res = {
        list: this.list
      }
      this.$emit('onNextClick', res, this.step)
    },
    commit () {
      this.$emit('updateRoute', {name: this.Form.name})
    },
    resetForm () {
      this.Form.name = ''
      this.list = []
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
</style>
